<script setup>
import { ref, provide, onMounted } from 'vue';
import Loading from './components/Loading.vue';
import PageLoader from './components/PageLoader.vue';
import CookieConsent from './components/common/CookieConsent.vue';
import Feedback from './components/Feedback/index.vue';
import {getSetting} from "@/api/index.ts";
import {Local} from "@/utils/storage.ts";
import kefuAffix from '@/components/kefu/affix'
const getSiteKey = async () => {
  const res = await getSetting();
  if (res.code === 200) {
    Local.set('settingConfig', res.result)
  }
}

getSiteKey();
// 反馈组件显示状态
const showFeedback = ref(false);

// 提供给全局的打开反馈组件方法
const openFeedback = () => {
  showFeedback.value = true;
};

// 提供给子组件
provide('openFeedback', openFeedback);

onMounted(() => {
    kefuAffix() // Code from module 'kefu'(avo)
})
</script>

<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#262626',
        colorPrimaryHover: '#434343',
        colorPrimaryActive: '#1f1f1f',
      }
    }"
  >
    <Loading></Loading>
    <router-view></router-view>
    <PageLoader />
    <CookieConsent />
    <Feedback v-model:showFeedback="showFeedback" />
  </a-config-provider>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
